import React, { memo, useEffect, useLayoutEffect, useState } from 'react'

export default memo(function App() {
  let [count, setCount] = useState(100)

  // dom更新完了，才会执行，不会阻塞DOM更新
  /* useEffect(() => {
    console.log('useEffect')
    if (count === 0) {
      setCount(Math.random() + 99)
    }
  }) */

  // dom更新之前，才会执行，会阻塞DOM更新
  useLayoutEffect(() => {
    console.log('useEffect')
    if (count === 0) {
      setCount(Math.random() + 99)
    }
  })

  console.log('App render')
  return (
    <div>
      <h2>App Page Count: {count}</h2>
      <button onClick={(e) => setCount(0)}>0</button>
    </div>
  )
})
